import { useSettingStore } from '@/store';

import type { ChartColorObject } from '../../config/color';

export function changeChartsTheme(charts: any[]) {
  const settingStore = useSettingStore();
  const colors = settingStore.chartColors as string | string[] | ChartColorObject;

  if (typeof colors === 'string') {
    charts.forEach((chart) => {
      chart.setOption({
        color: colors,
      });
    });
  } else if (Array.isArray(colors)) {
    charts.forEach((chart) => {
      chart.setOption({
        color: colors,
      });
    });
  } else if (typeof colors === 'object' && colors !== null) {
    const chartColors = colors as ChartColorObject;
    charts.forEach((chart) => {
      chart.setOption({
        color: [chartColors.placeholderColor, chartColors.borderColor, chartColors.containerColor].filter(Boolean),
      });
    });
  }
}

export function convertChartColorsToObject(colors: string | string[] | ChartColorObject): ChartColorObject {
  if (typeof colors === 'string') {
    return {
      placeholderColor: colors,
      borderColor: colors,
      containerColor: colors,
    };
  }
  if (Array.isArray(colors)) {
    return {
      placeholderColor: colors[0] || '#0052FF',
      borderColor: colors[1] || '#B8E1FF',
      containerColor: colors[2] || '#0052FF',
    };
  }
  return colors;
}

export function getChartListColor(): string[] {
  return [
    '#0052FF',
    '#B8E1FF',
    '#00A870',
    '#ED7B2F',
    '#E34D59',
    '#FCC700',
    '#834EC2',
    '#41B5FF',
    '#5AD8A6',
    '#FF8652',
    '#E96A7C',
    '#FFCF55',
    '#B29CDF',
    '#6BC1FF',
    '#8CE6B8',
    '#FFB98C',
    '#F3A3AD',
    '#FFE380',
    '#D3C5ED',
    '#97D4FF',
  ];
}
